<template>
	<div id="express_sheet">
		<el-form :inline="true" size="medium">
			<el-form-item>
				<el-select v-model="params.storeId" placeholder="选择仓库" clearable @change="search">
					<el-option :value="item.id" :label="item.name" v-for="(item, index) in goodsStoreList"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-select v-model="params.expressStatus" placeholder="选择面单类型" clearable @change="search">
					<el-option value="1" label="通用电子面单"></el-option>
					<el-option value="2" label="菜鸟电子面单"></el-option>
					<el-option value="3" label="拼多多面单"></el-option>
					<el-option value="0" label="其他"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-input v-model="params.shipperName" placeholder="快递公司名称" clearable></el-input>
			</el-form-item>
			
			<el-form-item>
				<el-button type="primary" @click="search">搜索</el-button>
				<el-button @click="dialogVisible = true">添加</el-button>
			</el-form-item>
		</el-form>

		<el-table :data="list" v-loading="loading" stripe>
			<el-table-column label="id" prop="id" align="center"></el-table-column>
			<el-table-column label="类型" align="center">
				<template slot-scope="scope">
					<span v-if="scope.row.other_type === 1">自有仓库</span>
					<span v-if="scope.row.other_type === 2">爱代发</span>
					<span v-if="scope.row.other_type === 3">就代发</span>
					<span v-if="scope.row.other_type === 4">瑶瑶</span>
					<span v-if="scope.row.other_type === 5">星辰</span>
					<span v-if="scope.row.other_type === 6">海淘</span>
					<span v-if="scope.row.other_type === 7">代发发</span>
				</template>
			</el-table-column>
			<el-table-column label="店铺id" prop="user_id" align="center">
				<template slot-scope="scope">
					{{scope.row.user_id || '--'}}
				</template>
			</el-table-column> 
			<el-table-column label="所属仓库" prop="store+id" align="center">
				<template slot-scope="scope">
					{{selectStore(scope.row.store_id)}}
				</template>
			</el-table-column>
			<el-table-column label="面单类型" prop="express_status" align="center">
				<template slot-scope="scope">
					{{selectExpressType(scope.row.express_status)}}
				</template>
			</el-table-column>
			<el-table-column label="快递公司名称" prop="shipper_name" align="center"></el-table-column>
			<el-table-column label="网点名称" prop="company" align="center"></el-table-column>
			<el-table-column label="发货人" prop="name" align="center"></el-table-column>
			<el-table-column label="发货人手机/电话" prop="mobile" align="center">
				<template slot-scope="scope">
					<p>{{scope.row.mobile}}</p>
					<p>{{scope.row.tel}}</p>
				</template>
			</el-table-column>
			<el-table-column label="地址" align="center">
				<template slot-scope="scope">
					<p>{{scope.row.province_name}}</p>
					<p>{{scope.row.city_name}}</p>
					<p>{{scope.row.exp_area_name}}</p>
					<p>{{scope.row.address}}</p>
				</template>
			</el-table-column>
			
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<el-button type="text" @click="setData(scope.row)" >修改</el-button>
					<el-button type="text" class="error" @click="del(scope.row.id)" >删除</el-button>
					<!-- <el-button type="text" @click="setData(scope.row)" v-if="scope.row.otherType==1 || scope.row.otherType==5">修改</el-button>
					<el-button type="text" class="error" @click="del(scope.row.id)" v-if="scope.row.otherType==1">删除</el-button> -->
				</template>
			</el-table-column>
		</el-table>

		<el-pagination 
			class="page"
			background
			@size-change="handleSizeChange" 
			@current-change="getList" 
			:current-page.sync="params.pageNo" 
			:page-sizes="[10, 20, 50, 100]" 
			:page-size="params.pageSize" 
			layout="total, sizes, prev, pager, next, jumper" 
			:total="total">
		</el-pagination>
		
		<el-dialog
			:title="formData.id ? '修改': '添加'" 
			:visible.sync="dialogVisible" 
			width="530px" 
			center 
			:before-close="handleClose"
			:close-on-click-modal="false"
		>
			<el-form :model="formData" :rules="rules" ref="formData" label-width="110px">
				<el-form-item label="店铺id" prop="user_id">
					<el-input v-model="formData.user_id" placeholder="请输入店铺id"></el-input>
				</el-form-item>
				<el-form-item label="所属仓库" prop="store_id">
					<el-select placeholder="选择仓库" v-model="formData.store_id" clearable style="width: 100%;">
						<el-option :label="item.name" :value="item.id.toString()" v-for="(item, index) in goodsStoreList"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="面单类型" prop="express_status">
					<el-select v-model="formData.express_status" placeholder="选择面单类型" clearable style="width: 100%;">
						<el-option value="1" label="通用电子面单"></el-option>
						<el-option value="2" label="菜鸟电子面单"></el-option>
						<el-option value="3" label="拼多多面单"></el-option>
						<el-option value="0" label="其他"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="面单模板" prop="customer_name">
					<el-input v-model="formData.customer_name" placeholder="请输入客户ID或菜鸟模板链接"></el-input>
				</el-form-item>
				<el-form-item label="秘钥" prop="customer_pwd">
					<el-input v-model="formData.customer_pwd" placeholder="请输入联调密码或阿奇索授权的菜鸟面单AccssToken"></el-input>
				</el-form-item>
				<el-form-item label="快递公司编码" prop="shipper_code">
					<el-input v-model="formData.shipper_code" placeholder="请输入快递公司编码"></el-input>
				</el-form-item>
				<el-form-item label="快递公司名称" prop="shipper_name">
					<el-input v-model="formData.shipper_name" placeholder="请输入快递公司名称"></el-input>
				</el-form-item>
				<el-form-item label="网点名称" prop="company">
					<el-input v-model="formData.company" placeholder="请输入网点名称"></el-input>
				</el-form-item>
				<el-form-item label="发货人" prop="name">
					<el-input v-model="formData.name" placeholder="请输入发货人姓名" maxlength="10"></el-input>
				</el-form-item>
				<el-form-item label="发货人手机号" prop="mobile">
					<el-input v-model="formData.mobile" placeholder="请输入发货人手机号" maxlength="11"></el-input>
				</el-form-item>
				<el-form-item label="发货人电话" prop="tel">
					<el-input v-model="formData.tel" placeholder="请输入发货人电话" maxlength="13"></el-input>
				</el-form-item>
				<el-form-item label="发货省" prop="province_name">
					<el-input v-model="formData.province_name" placeholder="请输入省" ></el-input>
				</el-form-item>
				<el-form-item label="发货市" prop="city_name">
					<el-input v-model="formData.city_name" placeholder="请输入市"></el-input>
				</el-form-item>
				<el-form-item label="发货区/镇" prop="exp_area_name">
					<el-input v-model="formData.exp_area_name" placeholder="请输入区"></el-input>
				</el-form-item>
				<el-form-item label="发货详细地址" prop="address">
					<el-input v-model="formData.address" placeholder="请输入详细地址"></el-input>
				</el-form-item>
			</el-form>
			<div class="align-center">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="write" :loading="formLoading">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					pageNo: 1,
					pageSize: 10,
					isCount: true,
					expressStatus: '',
					shipperName: '',
					storeId:"",
				},
				list: [],
				total: 0,
				loading: false,
				goodsStoreList: [],
				dialogVisible: false,
				formLoading: false,
				formData: {
					user_id: '',
					store_id: '',
					express_status: '',
					customer_pwd: '',
					customer_name: '',
					shipper_code: '',
					shipper_name: '',
					company: '',
					name: '',
					mobile: '',
					tel: '',
					province_name:'',
					city_name: '',
					expArea_name: '',
					address: ''
				},
				rules:{
					// userId: {
					// 	message: '请输入店铺id', required: true, trigger: 'blur'
					// },
					storeId: {
						message: '请选择仓库', required: true, trigger: 'change'
					},
					expressStatus: {
						message: '请选择面单类型', required: true, trigger: 'change'
					},
					customerName: {
						message: '请输入客户ID或菜鸟模板链接', required: true, trigger: 'blur'
					},
					customerPwd: {
						message: '请输入联调密码或阿奇索授权的菜鸟面单AccssToken', required: true, trigger: 'blur'
					},
					shipperCode: {
						message: '请输入快递公司编码', required: true, trigger: 'blur'
					},
					shipperName: {
						message: '请输入快递公司名称', required: true, trigger: 'blur'
					},
					// company: {
					// 	message: '请输入网点名称', required: true, trigger: 'blur'
					// },
					name: {
						message: '请输入发货人姓名', required: true, trigger: 'blur'
					},
					mobile: {
						 required: true, trigger: 'blur', validator: (rule, value, callback)=>{
							if(!value){
								callback('请输入手机号码')
							}else if(!this.$common.isPhone(value)){
								callback('手机号码格式不正确')
							}else{
								callback()
							}
						}
					},
					provinceName: {
						message: '请输入发货省', required: true, trigger: 'blur'
					},
					cityName: {
						message: '请输入发货市', required: true, trigger: 'blur'
					},
					expAreaName: {
						message: '请输入发货区/镇', required: true, trigger: 'blur'
					},
					address: {
						message: '请输入发货详细地址', required: true, trigger: 'blur'
					},
					
				}
			};
		},

		watch: {},

		create() {},

		mounted() {
			this.getList();
			this.getStore();
		},

		methods: {
			handleSizeChange(value) {
				this.params.pageSize = value 
				this.search()
			},
			
			handleClose(done){
				if(!this.formLoading){
					this.reset()
					done();
				}
			},
			
			search(){
				this.params.pageNo = 1
				this.params.isCount = true 
				this.getList();
			},
			
			getList() {
				this.loading = true
				this.$request.post({
					url: '/ReportApi/admin/expresssheetlist',
					params: this.params,
					success: result =>{
						this.list = result[0] 
						if(this.params.isCount){
							this.params.isCount = false 
							this.total = result[1]
						}
					},
					finally: ()=>{
						this.loading = false 
					}
				})
			},
			
			setData(data){
				for(var key in data){
					this.formData[key] = data[key]
				}
				this.formData.store_id = data.store_id.toString()
				this.formData.express_status = data.express_status.toString()
				delete this.formData.create_time
				this.dialogVisible = true 
			},
			
			write(){
				this.$refs['formData'].validate((valid) => {
					if(valid){
						if(this.formLoading){
						 	return; 
						 }
						this.formLoading = true
						var url = '/ReportApi/admin/' + (this.formData.id ? 'expresssheetupdate' : 'expresssheetadd') 
						this.$request.post({
							url,
							params: this.formData,
							success: result => {
								this.$message.success('操作成功')
								this.dialogVisible = false 
								this.reset()
								this.search()
							},
							finally: ()=>{
								this.formLoading = false 
							}
						})
					}
				})
			},
			
			
			getStore() {
				this.$request.post({
					closeErrInfo: true,
					closeCodeInfo: true,
					url: '/ReportApi/admin/expresssheetalllists',
					success: result => {
						this.goodsStoreList = result
					}
				})
			},
			
			del(id){
				this.$confirm('确认删除?', '提示').then(() => {
					this.$request.post({
						url: '/ReportApi/admin/expresssheetdel',
						params: {
							id
						},
						success: () => {
							this.$message.success('操作成功')
							if (this.params.pageNo > 1 && this.list.length < 2) {
								this.params.pageNo--
							}
							this.getList();
						}
					})
				})
			},
			
			selectStore(storeId) {
				if (!this.goodsStoreList.length) {
					return;
				}
				var index = this.goodsStoreList.findIndex(item => item.id == storeId);
				if(index == -1){
					return ''
				}
				return this.goodsStoreList[index].name
			},
			
			selectExpressType(expressStatus){
				switch(expressStatus){
					case 1: 
						return "通用电子面单";
					case 2: 
						return "菜鸟电子面单";
					case 3: 
						return "拼多多面单";
					case 4: 
						return "京东面单";
					default: 
						return "其他面单";
				}
			},
			
			
			reset(){
				for(var key in this.formData){
					this.formData[key] = ''
				}
			},

			getUrl(value){
				if(value.indexOf('http')==-1){
					return this.$envConfig.serviceUrl+value;
				}else{
					return value;
				}
			}
		},

		beforeDestroy() {}
	}
</script>

<style>

</style>

<style lang="scss" scoped>
	.page{
		text-align: right;
		margin-top: 20px;
	}
</style>
